<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <title>Document</title>
</head>

<body>

  <div id="app">
    <!-- 
      插值表达式用 {{}} 包裹
      也叫声明式渲染/文本插值 语法:{{表达式}} 注意不能出现语句比如if for
      表达式和语句典型的区别就是,表达式有返回值,语句没有
     -->
    <span>{{title}}</span>
    <p>{{msg}}</p>
    <p> {{age}}岁时就是世界冠军 </p>
    <p>{{age+1}} </p>
    <!-- <p>{{age++}} </p> -->
    <h3>{{ age >= 18? '成年了':'未成年' }}</h3>
  </div>
  <script>

    const vm = new Vue({
      // el: "#app",
      data: {
        title: "我的第一个Vue",
        msg: "TheShy",
        age: 18
      },
    });


    /*   $mount挂载

      如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。
      可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
      两者在使用上效率上没有太大区别,但是$mount可以延迟挂载
    */
    setTimeout(() => {
      vm.$mount("#app");
    }, 2000);

  </script>
</body>

</html>